﻿<template>
    <div>
        <Content :style="{padding: '24px', minHeight: '480px', background: '#fff'}">
            <el-row style="margin-bottom:12px">
                <el-button size="small" v-on:click="add()" type="primary">添加竞品链接</el-button>
            </el-row>
            <el-form ref="queryParams" inline label-position="right" label-width="120px" v-model="queryParams">
                <el-form-item label="标题">
                    <el-input size="small" v-model="queryParams.title" placeholder="标题" style="width: 180px" />
                </el-form-item>
                <el-form-item>
                    <el-button v-on:click="search()" size="small" type="primary">搜索</el-button>
                    <el-button v-on:click="reset()" size="small">重置</el-button>
                </el-form-item>
            </el-form>
            <!-- 
              <Table :loading="loading" :columns="columns" :data="productTrackings" border>
            </Table>
            -->
            <el-table size="small" :data="productTrackings" border style="width: 100%" v-loading="loading">
                <el-table-column type="selection" width="55">
                </el-table-column>
                <el-table-column align="center" prop="title" label="标题">
                    <template slot-scope="scope">
                        <el-image style="width: 120px;" :src="scope.row.thumb"></el-image>
                        <div>
                            <a target="_blank" :href="scope.row.url">{{scope.row.title}}</a>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column align="center" prop="createTime" label="创建时间">
                    <template slot-scope="scope">
                        <div>{{scope.row.createTime | long2datetime}}</div>
                    </template>
                </el-table-column>
                <el-table-column align="center" prop="updateTime" label="更新时间">
                    <template slot-scope="scope">
                        <div>{{scope.row.updateTime | long2datetime}}</div>
                    </template>
                </el-table-column>
                <el-table-column align="center" prop="minPrice" label="价格">
                    <template slot-scope="scope">
                        <div>{{scope.row.minPrice}}~{{scope.row.maxPrice}}</div>
                    </template>
                </el-table-column>
                <el-table-column align="center" prop="updown" label="跟踪状态">
                    <template slot-scope="scope">
                    </template>
                </el-table-column>
                <el-table-column align="center" prop="id" label="操作">
                    <template slot-scope="scope">
                        <el-button type="danger" @click="doDelete(scope.row)" size="small">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div style="margin: 10px;overflow: hidden">
                <div style="float: right;">
                    <Page :page-size="page.pageSize" show-total :total="page.total" :current="page.current" @on-change="changePage"></Page>
                </div>
            </div>
        </Content>
        <CProductTrackingDialog ref="productTrackingDialog" @cancel="getList()" @ok="getList()" />
    </div>
</template>
<script>
import CProductTrackingDialog from "./CProductTrackingDialog.vue"
export default {
    name: 'ProductTracking',
    components: {
        CProductTrackingDialog
    },
    data() {
        return {
            loading: false,

            queryParams: {

            },
            others: {

            },
            productTracking: {

            },
            page: {
                total: 0,
                current: 1,
                pageSize: 10
            },
            productTrackings: [

            ],
            rules: {}
        };
    },
    mounted: function() {
        this.getList();

    },
    methods: {
        cbtime: function(value) {
            this.others;
        },
        search: function() {
            this.page.current = 1;
            this.page.total = 0;
            this.getList();
        },
        reset: function() {
            this.queryParams = {};
            this.search();
        },
        changePage(current) {
            this.page.current = current;
            this.getList();
        },
        getList: function() {
            var me = this;
            var params = me.queryParams;
            params.current = me.page.current;
            params.pageSize = me.page.pageSize;
            me.loading = true;
            me.$http.post("/producttracking/getList.do", params).then(response => {
                var body = response;
                if (body.status == 0) {
                    me.page.total = body.obj.totalCount;
                    me.productTrackings = body.obj.list;

                }
                me.loading = false;
            }, response => {
                me.loading = false;
            });
        },
        doDelete: function(row) {
            var me = this;
            me.$Modal.confirm({
                title: "提示",
                content: "是否执行该操作",
                onOk: function() {
                    me.$http.post("/producttracking/doDelete.do", { id: row.id }).then(response => {
                        var body = response;
                        if (body.status == 0) {
                            me.getList();

                        } else {
                            me.errorMessage( body.info);
                        }
                    }).catch(error => {

                    });
                },
                onCancel: function() {

                }
            });
        },

        add: function() {
            this.productTracking = {};
            this.$refs['productTrackingDialog'].showDialog("");
        }

    }
}
</script>
<style scoped>
</style>